<template>
  <div class="main">
    <div class="tan_chuang">
      <!-- 搜索部分 -->
      <div class="main-el-row-header">
        <div class="header-title">
          <div class="hang_title">
            <div class="one_title">数据关联配置</div>
            <div class="you"></div>
          </div>
        </div>
        <div class="header-content"></div>
      </div>
      <div class="TransferBox">
        <div class="SourceBox">
          <!--筛选-->
          <el-table
            height="500"
            :data="shopOptions"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="46"> </el-table-column>
            <!-- <el-table-column prop="id" label="id" width="200"> </el-table-column> -->
            <el-table-column prop="name" :label="data_name"> </el-table-column>
          </el-table>
        </div>
        <!--按钮-->
        <div class="buttonCentenr">
          <div class="posiBox">
            <p>
              <el-button @click="deleteGoodesLeft" class="bg_button"
                ><i class="el-icon-arrow-left"></i
              ></el-button>
            </p>
            <p>
              <el-button @click="AddGoodesRight" class="bg_button"
                ><i class="el-icon-arrow-right"></i
              ></el-button>
            </p>
          </div>
        </div>
        <!--右边已选择-->
        <div class="TargetBox">
          <el-table
            height="500"
            :data="TargetShopOptions"
            ref="multipleTable"
            tooltip-effect="dark"
            @selection-change="deleteChange"
            style="width: 100%"
            row-key="modelid"
          >
            <el-table-column
              type="selection"
              width="55"
              :selectable="canBeSelect"
            >
            </el-table-column>
            <!-- <el-table-column prop="id" label="id" width="200"> </el-table-column> -->
            <el-table-column prop="name" label="数据名称"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="btnzu">
        <el-button type="primary" class="bg_add" plain @click="updateNodeList"
          >确认</el-button
        >
        <el-button type="warning" class="bg_dao" plain>取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { post, get } from "../../utils/request";
export default {
  name: "ConvergenceAssociation",
  data() {
    return {
      value: [],
      showData: [],
      dataShow: [],
      multipleSelection: [], //左侧选中
      TargetMultipleSelection: [], //右侧选中
      shopOptions: [], // 左侧数据
      TargetShopOptions: [], //右侧数据
      linshi: [],
      left: [],
      data_type: "",
      data_name: "",
      cun: "",
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  updated() {
    this.moren();
  },
  methods: {
    init() {
      this.data_type = this.$route.query.item;
      this.data_name = this.$route.query.data;
      console.log(this.data_type);
      console.log(this.data_name);
      this.getDataNodeList();
      this.getDataDataList();
    },
    getDataNodeList() {
      var params = {
        nodeId: this.data_type,
      };
      if (this.data_type) {
        params = {
          nodeId: this.data_type,
        };
      } else {
        params = {
          nodeId: 0,
        };
      }
      post("/api/idatamanage/dataGov/queryChildrenNodeList", params).then(
        (res) => {
          // console.log("已关联数据 ==>", res.data.data);
          this.shopOptions = res.data.data;
          // this.shopOptions.forEach((item) => {
          //   this.$set(item, "name", item.nodeName);
          //   this.$set(item, "id", item.nodeId);
          // });
          // console.log(this.shopOptions, "已关联数据");
        }
      );
    },
    getDataDataList() {
      get("/api/idatamanage/dataGov/queryDataList").then((res) => {
        console.log("可关联的数据==>", res.data.data);
        this.TargetShopOptions = res.data.data;
        this.TargetShopOptions.forEach((item, index) => {
          this.$set(item, "modelid", index + 1);
        });

        // 将右侧可关联数据与左侧已关联数据进行关联
        this.shopOptions.forEach((value) => {
          this.TargetShopOptions.forEach((item) => {
            if (item.name == value.nodeName) {
              this.$set(value, "name", item.name);
              this.$set(value, "modelid", item.modelid);
            }
          });
        });
        this.shopOptions.forEach((value) => {
          if (!value.modelid) {
            this.$set(value, "name", value.nodeName);
            this.$set(value, "modelid", this.TargetShopOptions.length + 1);
          }
        });
        console.log(this.shopOptions, "1");
        // 拿到右侧可关联数据没有的数据
        let arr = [];
        this.TargetShopOptions.forEach((item) => {
          arr.push(item.name);
        });
        // 将左侧已关联数据与右侧可关联数据进行合并
        this.shopOptions.forEach((value) => {
          if (arr.indexOf(value.nodeName) === -1) {
            this.TargetShopOptions.push(value);
          }
        });

        this.TargetShopOptions.forEach((item) => {
          this.$set(item, "display", true);
        });

        let TargetShopOptions = this.TargetShopOptions;
        let shopOptions = this.shopOptions;
        let arrRow = [];

        //遍历表格的数据，再遍历需要在表格中反显的数据，两者的id一致
        TargetShopOptions.forEach(function (item) {
          shopOptions.forEach(function (value) {
            if (value.modelid == item.modelid) {
              // 将其设置为禁用状态
              arrRow.push(item);
              item.display = false;
            }
          });
        });
        this.TargetMultipleSelection = arrRow;
        // this.toggleSelection(this.TargetMultipleSelection);
      });
    },
    moren() {
      this.toggleSelection(this.TargetMultipleSelection);
    },
    /*左边全部商品数据选中监听*/
    handleSelectionChange(val) {
      console.log(val, "左侧选中");
      this.multipleSelection = val;
    },
    /*右边边商品数据选中监听*/
    deleteChange(val) {
      // if (val == "") {
      //   val = this.TargetMultipleSelection;
      // }
      console.log(val, "右侧选中");
      this.TargetMultipleSelection = val;
    },
    /*穿梭框到右边*/
    AddGoodesRight() {
      let multipleSelection = this.multipleSelection; //左侧选中数据
      let shopOptions = this.shopOptions; // 左侧所有数据
      let TargetMultipleSelection = this.TargetMultipleSelection; // 右侧选中的数据
      let TargetShopOptions = this.TargetShopOptions; // 右侧的所有数据
      console.log(
        multipleSelection,
        "左侧选中数据",
        shopOptions,
        "左侧所有数据",
        TargetMultipleSelection,
        "右侧选中数据",
        TargetShopOptions,
        "右侧所有数据"
      );
      let deleteArry = []; // 用来存放右侧要取消禁用和选中的modelid
      TargetShopOptions.forEach((value) => {
        // console.log(value.modelid); // 1-51 右侧所有数据的modelid
        multipleSelection.forEach((item) => {
          // console.log(item.modelid); // 左侧选中数据的 modelid
          if (value.modelid == item.modelid) {
            // 当两个modeid相同时 代表右侧要取消该项的禁用与选中
            deleteArry.push(item.modelid);
            value.display = true;
          }
        });
      });
      console.log(deleteArry, "需要取消选中的modelid");
      shopOptions = shopOptions.filter(function (item) {
        console.log(item);
        return deleteArry.indexOf(item.modelid) == -1;
      });
      this.shopOptions = shopOptions;
      this.TargetMultipleSelection = shopOptions;
      console.log(this.TargetShopOptions);
      this.toggleRowSelection();
    },
    /*从右边穿梭到左边*/
    deleteGoodesLeft() {
      let TargetMultipleSelection = this.TargetMultipleSelection; // 右侧选中的数据
      console.log(TargetMultipleSelection,'TargetMultipleSelection');
      this.shopOptions = TargetMultipleSelection; // 更改左侧数据列表
      console.log(this.TargetMultipleSelection,'TargetMultipleSelection');
      this.TargetMultipleSelection = this.shopOptions; // 将
      let displayArry = []; // 用来存放右侧要取消禁用和选中的modelid
      this.TargetMultipleSelection.forEach((item) => {
        item.display = false;
        if (item.display == false) {
          displayArry.push(item);
        }
      });
    },
    toggleSelection(rows) {
      console.log(rows, "取消选中");
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    canBeSelect(row) {
      if (row.display) {
        return true;
      } else {
        return false;
      }
    },
    updateNodeList() {
      console.log(this.shopOptions);
      let arrs = [];
      this.shopOptions.forEach((element) => {
        arrs.push({
          nodeName: element.name,
        });
      });
      let params = {
        children: arrs,
        nodeId: this.data_type,
        nodeName: this.data_name,
      };
      console.log(params);
      post("/api/idatamanage/dataGov/updateChildrenNodeList", params).then(
        (res) => {
          console.log(res.data.message);
          if (res.data.message == "成功") {
            this.$message({
              message: "成功",
              type: "success",
            });
          }
        }
      );
    },
    quxiao() {
      this.toggleSelection(this.TargetMultipleSelection);
    },
  },
  watch: {
    // 如果路由发生变化，再次执行该方法
    $route() {
      this.init();
    },
  },
};
</script>
<style src="../../assets/css/common.css"></style>
<style  lang="scss" scoped>
.main {
  // 最外层的盒子
  font-family: "宋体";
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 85vh;
}
.btnzu {
  width: 300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .bg_add {
    padding: 9px 15px;
    background: rgb(4, 119, 166);
    color: #fff;
    border: none;
  }
  .bg_add:hover {
    color: rgb(132, 242, 255);
  }
  .bg_dao {
    padding: 9px 15px;
    background: rgb(4, 119, 166);
    color: #fff;
    border: none;
  }
  .bg_dao:hover {
    color: #e6a23c;
  }
}
.el-table--border {
  // border-bottom: 1px solid #ebeef5 !important;
  border-bottom: 1px solid #0c2d40 !important;
}
::v-deep .el-table {
  background-color: #0c2d40 !important;
  .el-table__cell,
  .el-table__cell.is-leaf {
    // border-bottom: 1px solid #ebeef5 !important;
    border-bottom: 1px solid #0c2d40 !important;
  }
}

.el-form-item__label {
  color: #84f2ff !important;
}

.header-content {
  height: 66px;
  padding: 10px 20px;
}

.div-el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-table::before {
  content: "";
  position: absolute;
  background-color: transparent;
  z-index: 1;
}
::v-deep .el-table tr {
  background-color: transparent;
}

.el-dialog {
  background-color: rgba(8, 79, 140, 1);
}

.TransferBox {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}
.SourceBox {
  width: 400px;
}
.buttonCentenr {
  position: relative;
  width: 150px;
}
.posiBox {
  position: absolute;
  top: 100px;
  left: 50px;
}
.posiBox p {
  margin-top: 50px;
}
.TargetBox {
  width: 400px;
}
#reduce_settings {
  height: 100%;
}
.markingInfobox {
  background-color: #ffffff;
  position: fixed;
  top: 90px;
  left: 180px;
  bottom: 80px;
  right: 10px;
  overflow-y: auto;
  padding: 30px 50px;
}
.titleP {
  position: relative;
}
.titleinfoP {
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
  color: rgba(21, 168, 253, 1);
  font-size: 18px;
  display: inline-block;
}
.bluespan {
  display: inline-block;
  width: 3px;
  height: 20px;
  background: rgba(21, 168, 253, 1);
  position: absolute;
}
.formBox p {
  margin-top: 25px;
  font-size: 16px;
  color: #333333;
}
.submitmarking {
  margin-top: 40px;
}
.redspan {
  color: red;
  display: inline-block;
  width: 20px;
  text-align: center;
}
.timecenter {
  font-size: 14px;
  display: inline-block;
  width: 20px;
  text-align: center;
}
</style>